/*
 * @Author       : NaN 353362604@qq.com
 * @Date         : 2023-06-16 15:42:20
 * @LastEditTime : 2023-06-18 10:01:07
 * @LastEditors  : NaN 353362604@qq.com
 * @FilePath     : \AdminStration\src\Common\Router\MenuNav\DiyList\PersonExaminations.jsx
 * @Description  :
 */
import './Scss/PersonExaminations.scss'
import { Divider, Radio, Checkbox, Button, Modal, Input, message } from 'antd'
import { useEffect, useState } from 'react'
import { useBoolean, useRequest, useSetState } from 'ahooks'
import { Http } from '../../../Api'
import { BuiltInData } from '../Common/common'

const SubmitBox = ({ open, off, data, tableName }) => {
    const [messageApi, contextHolder] = message.useMessage()
    const [UserInfo, setUserInfo] = useSetState({ personId: '', personName: '' })
    const { runAsync } = useRequest(Http, { manual: true })
    const [loading, { setTrue, setFalse }] = useBoolean(false)
    const submit = () => {
        if (UserInfo.personId && UserInfo.personId) {
            setTrue()
            const score = data.reduce((acc, cur) => acc + cur.score, 0)
            const pra = { tableName, score, ...UserInfo }
            runAsync({ url: 'posPersonExamination', data: pra }).then(res => {
                messageApi.success('答案已提交!')
                setFalse()
            })
        } else {
            messageApi.error('请输入人员信息!')
        }
    }

    return (
        <Modal
            className="PersonExaminationsModal"
            title="提交答案"
            open={open}
            footer={null}
            maskClosable={false}
            onCancel={off}
            destroyOnClose
            width={1000}
            centered
        >
            {contextHolder}
            <div className="Box">
                <div className="title">
                    <div>1.说明</div>
                </div>
                <div className="input">
                    <Input placeholder="请输入人员编号" onChange={e => setUserInfo({ personId: e.target.value })} />
                    <Input placeholder="请输入人员姓名" onChange={e => setUserInfo({ personName: e.target.value })} />
                </div>
                <div className="submit">
                    <Button type="primary" loading={loading} onClick={submit}>
                        提交答案
                    </Button>
                </div>
            </div>
        </Modal>
    )
}

export const PersonExaminations = () => {
    const { runAsync: getExaminationLists } = useRequest(Http, { manual: true })
    const [Title, setTitle] = useState()
    const [List, setList] = useState([])
    const [Question, setQuestion] = useState([])
    const [ModalStatus, { setTrue, setFalse }] = useBoolean(false)

    useEffect(() => {
        getExaminationLists({ url: 'getExaminationLists' }).then(res => {
            const { list } = res
            const [{ tableName }] = list
            const question = list.map(({ uuid }) => ({ uuid, score: 0 }))
            setQuestion(question)
            setTitle(tableName)
            setList(list)
        })
    }, [getExaminationLists])

    const handle = (e, data) => {
        const { uuid, remark, score } = data
        if (remark === e) Question.find(v => v.uuid === uuid).score = score
        else Question.find(v => v.uuid === uuid).score = 0
        setQuestion([...Question])
    }
    const submit = () => {
        const sumOfSalaries = Question.reduce((acc, cur) => acc + cur.score, 0)
        console.log(sumOfSalaries)
    }

    return (
        <div className="PersonExaminations">
            <div className="Title">{Title}党员答题卡</div>
            <Divider />
            <div className="List">
                {List.map(({ fullName, keyword, questionType, ...item }, index) => (
                    <div key={index}>
                        <div className="stem">
                            {index + 1}.{fullName} ({BuiltInData.questionType[questionType]})
                        </div>
                        <div className="answer">
                            {(() => {
                                if (questionType === 0) {
                                    return (
                                        <Radio.Group>
                                            {JSON.parse(keyword).map(({ uuid, one, two }) => (
                                                <Radio
                                                    onChange={e => handle(e.target.value, item)}
                                                    key={uuid}
                                                    value={one}
                                                >
                                                    {one}.{two}
                                                </Radio>
                                            ))}
                                        </Radio.Group>
                                    )
                                }
                                if (questionType === 1) {
                                    const options = JSON.parse(keyword).map(({ one, two }) => ({
                                        label: `${one}.${two}`,
                                        value: one,
                                    }))
                                    return (
                                        <Checkbox.Group options={options} onChange={e => handle(e.join(','), item)} />
                                    )
                                }
                            })()}
                        </div>
                    </div>
                ))}
            </div>
            <div className="submit">
                <Button type="primary" style={{ width: 200 }} onClick={setTrue}>
                    提交
                </Button>
            </div>
            <SubmitBox open={ModalStatus} off={setFalse} data={Question} tableName={Title} />
        </div>
    )
}
